<!DOCTYPE html>
  <html dir='rtl'>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../css/map.css"/>
  </head>
  <body>
    <div id="main">
    <div id="map"></div>
    <div id="footer">
      <div class="foot">
        <div class="mui-content">
            <div  id="muiContent"></div>
            <div  id="muiCommon"></div>
        </div>
        <div class="mui-content" style="width: 100%; margin-top: 10px;">
          <div class="mui-row">
            <div class="mui-col-xs-6">
                <button type="button"  class="mui-btn" id="search">Search</button>
            </div>
            <div class="mui-col-xs-6">
               <button type="button" class="mui-btn"   id="showList">Show List</button>
            </div>
          </div>
        </div>
    </div>
  </div>
  </body>
  <script id="template" type="text/x-dot-template">
    <div class="mui-col-xs-6">
      <select id="select1" onchange="select1('select1')"  style="width: 100%;">
          <option value="">Organization</option>
            {{ for (var key in it) { }}
          <option value={{=it[key].id}}>{{=it[key].Name}}</option>
            {{ } }}
        </select>
      </div>
  </script>
  <script id="template2" type="text/x-dot-template">
    <div class="mui-col-xs-6">
      <select onchange="select2('select2')" id="select2" style="width: 100%;">
        <option value="">PlateNumber</option>
          {{ for (var prop in it) { }}
        <option value={{=it[prop].id}}>{{=it[prop].PlateNumber}}</option>
          {{ } }}
      </select>
    </div>
  </script>

  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/doT.min.js"></script>
  <script type="text/javascript" src="../script/gps.js"></script>
  <script type="text/javascript" src="../script/ajax.js"></script>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDF8b23KBR4I5abL25PcVB930nkq2XeMAs&language=ar&region=EG"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript">
      apiready = function() {
        let showList = $api.byId('showList');
        var template = $api.byId('template');
        var template2 = $api.byId('template2');
        var search = $api.byId('search');
        var query = $api.getStorage('query');
        var interText = doT.template(template.innerHTML);
        var interText2 = doT.template(template2.innerHTML);
        showList.addEventListener('click', function() {
          let values1 = select1('select1');
          let values2 = select2('select2');
          if (values1 === '') {
            org = query.Org;
          } else {
            org = values1;
          }
          api.openWin({
              name: 'showlist2',
              url: './showlist2.html',
              bounces: false,
              slidBackEnabled: false,
              pageParam: {
                org: org,
                number: values2
              }
          });
        });
      getId(interText);
      getPlateNumber(query.id, interText2);
      getData(query.Org, '');
      initMap();
      search.addEventListener('click', function() {
        let org = '';
        let values1 = select1('select1');
        let values2 = select2('select2');
        if (values2 === 'PlateNumber') {
          values2 = '';
        }
        if (values1 === '') {
          org = query.Org;
          getData(org, values2);
        } else {
          org = values1;
          getData(org, values2);
        }
      });

    }
</script>

  </html>
